<template>
  <view class="inspectionBox">
    <view class="inspectionTop">
      <view class="inspectionBg">
        <view :style="`height:${system?.statusHeight}rpx`"></view>
        <view class="navTitle">
          <view class="action"> </view>
          <view class="title"> 孕产记录</view>
          <view class="action" @click="cencelChange()">取消</view>
        </view>
      </view>
    </view>
    <view class="list">
      <scroll-view class="inspectionScroll" enableBackToTop="true" scroll-y>
        <view class="listItem" v-for="(item, index) in clist" :key="index">
          <view class="listItem_right">
            <view class="name u-line-1">{{ item?.name }}</view>
            <view class="cate_item u-line-1" v-if="item?.user_cate?.length">
              必查项目： <text v-for="(i, ind) of item?.user_cate" :key="ind">{{ i?.name }}</text>
            </view>
            <view class="cate_item u-line-1" v-else>
              必查项目： <text>{{ cateToString(item?.bcxm_cate) }}</text>
            </view>
          </view>
          <view class="icon" @click="checkboxChange(item, index)">
            <image
              src="https://ossresource.miyingbl.com/uploads/20240510/94a265a6f18195c6b7067e3e9515e5d5.png"
              class="icon"
              v-if="!item?.selected"
            ></image>
            <image
              src="https://ossresource.miyingbl.com/uploads/20240510/f9b97aec3b9ea10e36e36fa84d15d249.png"
              class="icon"
              v-else
            ></image>
          </view>
        </view>
        <view style="height: 154rpx"></view>
      </scroll-view>
    </view>

    <view class="fixedBottom">
      <view style="flex: 1"></view>
      <view v-if="checkboxValue.length > 0">已选中{{ checkboxValue.length }}条记录</view>
      <view class="sendBtn" :class="{ onClick: checkboxValue.length > 0 }" @click="send()"
        >发送</view
      >
    </view>
  </view>
</template>

<script setup>
import { useMemberStore, useSystemStore } from '@/stores'
const useSystem = useSystemStore()
const system = useSystemStore()
import { nextTick, ref, onMounted, computed, watch } from 'vue'
const emit = defineEmits(['changeInspection'])
const cencelChange = () => {
  emit('cencel')
}
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  height: {
    type: Number,
    default: 0,
  },
})
const clist = ref([])
const checkboxValue = ref([])
onMounted(() => {
  checkboxValue.value = []
  clist.value = JSON.parse(JSON.stringify(props.list))
  console.log(props.list)
  console.log(clist.value)
})
const checkboxChange = async (item, index) => {
  clist.value[index].selected = !item.selected
  console.log(props.list)
  let ids = await filterData()
  checkboxValue.value = ids
}
const filterData = () => {
  let ids = clist.value.filter((v) => {
    return v.selected
  })
  return ids
}
const cateToString = (data) => {
  let str = data?.join('、')
  return str
}
const send = () => {
  emit('changeInspection', {
    ids: checkboxValue.value,
  })
}
</script>

<style lang="scss">
.inspectionBox {
  height: 100vh;
  /* display: flex;
    flex-direction: column;
    align-items: center; */
}

.scroll-v {
  /* height: 100%; */
}

.list {
  margin-top: -54rpx;
  background: #f6f6f6;
  border-radius: 25rpx 25rpx 0rpx 0rpx;
  padding-top: 21rpx;
  /* flex:1; */
  height: calc(100vh - 208rpx);
}

.inspectionTop {
  width: 750rpx;
  height: 258rpx;
  background: url('https://ossresource.miyingbl.com/uploads/20240510/48ee01a6f94339a3f7efa6dc5060e67a.png');
  background-size: cover;
  display: flex;
  margin: 0 auto;
  align-items: flex-end;
  padding-bottom: 90rpx;
}

.listItem {
  width: 694rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 auto 20rpx;
  display: flex;
  align-items: center;
  padding: 45rpx 36rpx 38rpx 28rpx;
  font-family: PingFang SC, PingFang SC;

  .listItem_right {
    flex: 1;
  }

  .name {
    width: 411rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #333333;
  }

  .cate_item {
    width: 411rpx;

    margin-right: 10rpx;
    font-size: 26rpx;
    color: #333333;
    text-align: left;
    padding-top: 10rpx;
  }

  .icon {
    width: 48rpx;
    height: 48rpx;
  }
}

.fixedBottom {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  left: 0;
  margin: auto;
  padding: 38rpx 30rpx;
  background: #fff;
  font-weight: 500;
  font-size: 26rpx;
  color: #333333;
  display: flex;
  align-items: center;
  z-index: 1;

  .sendBtn {
    margin-left: 20rpx;
    width: 114rpx;
    height: 68rpx;
    background: #cccccc;
    border-radius: 91rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 68rpx;
    text-align: center;

    &.onClick {
      background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
    }
  }
}
.navTitle {
  display: flex;
  font-size: 24rpx;
  color: #333333;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  width: 750rpx;
  padding: 0 24rpx;
  justify-content: space-between;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #333333;
  }
  .action {
    width: 100rpx;
    text-align: right;
  }
}
</style>
